{% extends '__base__.html' %}

{% block title %}日志{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-12 pb-4">
                <div class="card">
                    <div class="card-header">
                        日志
                    </div>
                    <div class="card-body">
                        <button class="btn btn-sm btn-primary new"><i class="fa fa-plus-square" aria-hidden="true"></i>新增日志</button>
                        <table class="table table-striped">
                            <thead>
                              <tr>
                                <th scope="col">#</th>
                                <th scope="col">标题 / 摘要</th>
                                <th scope="col">作者</th>
                                <th scope="col">创建时间</th>
                                <th scope="col">操作</th>
                              </tr>
                            </thead>
                            <tbody>
                                {% if blogs %}
                                    {% for blog in blogs %}
                                    <tr>
                                        <th scope="row">{{ blog.id }}</th>
                                        <td>{{ blog.name }}</td>
                                        <td>{{ blog.user_name}}</td>
                                        <td>{{ blog.created_at | datetime }}</td>
                                        <td>
                                            <button class="btn btn-sm update" data-id="{{ blog.id }}"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                                            <button class="btn btn-sm delete" data-id="{{ blog.id }}"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                        </td>
                                    </tr>
                                    {% endfor%}
                                {% endif %}
                            </tbody>
                        </table>
                        {% if page %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li class="page-item {% if not page.pre.status %} disabled {% endif %}">
                                <a class="page-link" href="/blogs?page={{ page.pre.num }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                                </li>
                                {% for p in page.list %}
                                <li class="page-item {% if page.index==p %} disabled {% endif %}"><a class="page-link" href="/blogs?page={{ p }}">{{ p }}</a></li>
                                {% endfor %}
                                <li class="page-item {% if not page.next.status %} disabled {% endif %}">
                                <a class="page-link" href="/blogs?page={{ page.next.num }}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                                </li>
                            </ul>
                        </nav>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block beforebody %}
<script>
    document.querySelector('.new').addEventListener('click', event=>{
        location.assign('/blog/edit')
    })
    document.querySelectorAll('.update').forEach(el=>{
        el.addEventListener('click', event=>{
            let id = event.target.dataset['id'] ? event.target.dataset['id'] : event.target.parentNode.dataset['id']
            location.assign('/blog/edit/' + id)
        })
    })
    document.querySelectorAll('.delete').forEach(el=>{
        el.addEventListener('click', event=>{
            let id = event.target.dataset['id'] ? event.target.dataset['id'] : event.target.parentNode.dataset['id']
            if(confirm('删除日志[' + id + ']')){
                console.log('删除日志[' + id + ']');
                axios.post('/blog/delete/' + id, {})
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            location.assign('/blogs')
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        })
    })
</script>
{% endblock %}

